<template>
  <base-breadcrumb>
    <searchData :search-data="searchArr" @search="search" />

    <a-card :bordered="false">
      <!-- <title-name title="项目经理扣分项列表" /> -->

      <div class="table-operator">
        <a-button v-btnPermission="[{code:'seex_pm_032_add_01',ident:'prma_seex'},{code:'buco_pm_032_add_01',ident:'prma_buco'}]" type="primary" icon="plus" @click="handleAdd"> 新增扣分项 </a-button>
      </div>

      <div class="pub-table-select-count">
        <a-icon type="info-circle" theme="twoTone" />
        <span style="margin-right: 12px">
          扣分项共计：<span class="totalNum">{{ totalDels.total }} 个</span> | 可用：<span class="totalNum">{{ totalDels.usable }} 个</span> | 不可用：<span class="totalNum">{{ totalDels.disabled }} 个</span>
        </span>
      </div>

      <list-table ref="table" size="default" :row-key="(record) => record.id" :columns="columns" :request="loadData" :alert="true" show-size-changer show-quick-jumper show-pagination="auto">
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <span slot="status" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
        </span>
<!--        <span slot="deductScoreCondition" slot-scope="text">-->
<!--          <ellipsis :length="100" tooltip>{{ text }}</ellipsis>-->
<!--        </span>-->
        <span slot="action" slot-scope="text, record">
          <template>
            <a v-btnPermission="[{code:'seex_pm_032_edi_02',ident:'prma_seex'},{code:'buco_pm_032_edi_02',ident:'prma_buco'}]" @click="handleEdit(record)">编辑</a>
          </template>
        </span>
      </list-table>

      <a-modal v-model="visible" width="800px" :title="title" destroy-on-close>
        <template slot="footer">
          <a-button key="back" @click="handleCancel"> 取消 </a-button>
          <a-button key="submit" :loading="loading" type="primary" @click="handleOk"> 确定 </a-button>
        </template>
        <a-form-model ref="form1" :model="form" :rules="rules">
          <a-row>
            <!-- <a-col
              :md="12"
              :sm="12"
            >
              <a-form-model-item
                label="扣分分值"
                :label-col="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }"
                prop="deductScoreId"
              >
                <a-select
                  v-model="form.deductScoreId"
                  placeholder="请选择"
                  @change="getExtraData"
                >
                  <a-select-option
                    v-for="item in points"
                    :key="item.deductScoreId"
                    :value="item.deductScoreId"
                  >
                    {{ item.deductScore }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col> -->
            <a-col :md="24" :sm="24">
              <a-form-model-item label="状态" :label-col="{ lg: { span: 5 }, sm: { span: 5 } }" :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }" prop="statusCode">
                <a-select v-model="form.statusCode" placeholder="请选择">
                  <a-select-option :value="1"> 可用 </a-select-option>
                  <a-select-option :value="0"> 不可用 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="24" :sm="24">
              <a-form-model-item label="扣分情况" :label-col="{ lg: { span: 5 }, sm: { span: 5 } }" :wrapper-col="{ lg: { span: 18 }, sm: { span: 18 } }" prop="deductScoreCondition">
                <BaseInput v-model="form.deductScoreCondition" type="textarea" max-length="300" placeholder="输入扣分情况" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { getPointsList, getPointsTotal, addPoints, editPoints, getPoints } from '@/api/project/points'

import ARow from 'ant-design-vue/es/grid/Row'

const columns = [
  {
    title: '序号',
    scopedSlots: { customRender: 'serial' }
  },
  // {
  //   title: '扣分分值',
  //   width: '10%',
  //   dataIndex: 'deductScoreName'
  // },
  {
    title: '扣分情况',
    dataIndex: 'deductScoreCondition',
    // scopedSlots: { customRender: 'deductScoreCondition' }
  },
  {
    title: '状态',
    dataIndex: 'statusName'
  },
  {
    title: '操作',
    width: 180,
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'a' + Date.now(),
  components: {
    ARow,
    STable,
    Ellipsis
  },
  data() {
    return {
      columns,
      searchArr: [
        // 搜索框
        {
          name: '扣分情况',
          value: 'deductScoreCondition',
          type: 'input'
        },
        // {
        //   name: '扣分分值',
        //   value: 'deductScore',
        //   type: 'select',
        //   data:[]
        // },
        {
          name: '状态',
          value: 'statusCode',
          type: 'select',
          data: [
            { label: '全部', value: '' },
            { label: '可用', value: '1' },
            { label: '不可用', value: '0' }
          ]
        }
      ],

      loading: false,
      rules: {
        deductScoreId: [{ required: true, message: '请选择扣分分值', trigger: 'change' }],
        statusCode: [{ required: true, message: '请选择状态', trigger: 'change' }],
        deductScoreCondition: [{ required: true, message: '请输入扣分情况', trigger: 'blur' }]
      },
      businessId: 'PM10',
      visible: false,
      title: '',

      form: {}, // 新增扣分项
      dels: {}, // 详情

      queryParam: {},

      data: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getPointsList(requestParameters).then((res) => {
          return res
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      points: [],
      totalDels: {}
    }
  },

  created() {
    this.getPointsTotal()
    // this.getPointsReq()
  },
  computed: {},
  methods: {
    handleAdd() {
      this.title = '新增扣分项'
      this.form = {}
      this.visible = true
    },

    // 搜索
    search(val) {
      this.queryParam = val
      this.$refs.table.refresh(true)
      this.getPointsTotal()
    },

    // 扣分项统计
    getPointsTotal() {
      getPointsTotal(this.queryParam).then((res) => {
        this.totalDels = res.data
      })
    },

    // 编辑扣分项
    handleEdit(record) {
      this.title = '编辑扣分项'
      this.visible = true
      this.form = { ...record }
    },

    // 获取搜索扣分项
    getPointsReq() {
      getPoints().then((res) => {
        if (res.code == 200) {
          this.points = res.data
          let pointsList = []
          this.points.forEach((item) => {
            pointsList.push({
              label: item.deductScore,
              value: item.deductScoreId
            })
          })
          this.searchArr[1].data = pointsList
        }
      })
    },

    // 关闭弹层
    handleCancel() {
      this.visible = false
    },

    // 提交扣分项
    handleOk() {
      if (this.loading) return
      if (this.form.id) {
        this.$refs.form1.validate((err, value) => {
          if (err) {
            this.loading = true
            editPoints(this.form)
              .then((res) => {
                this.loading = false
                if (res.code == 200 || res.data.code == 200) {
                  this.$message.success('编辑成功')
                  this.visible = false
                  this.$refs.table.refresh(true)
                  this.getPointsTotal()
                }
              })
              .catch(() => {
                this.loading = false
              })
          }else {
            this.$message.warning("请填写完所有必填项信息")
          }
        })
      } else {
        this.$refs.form1.validate((err, value) => {
          if (err) {
            this.loading = true
            addPoints(this.form)
              .then((res) => {
                this.loading = false
                if (res.code == 200 || res.data.code == 200) {
                  this.$message.success('新增成功')
                  this.visible = false
                  this.$refs.table.refresh(true)
                  this.getPointsTotal()
                }
              })
              .catch(() => {
                this.loading = false
              })
          }else {
            this.$message.warning("请填写完所有必填项信息")
          }
        })
      }
    },

    // 获取扣分分值对象值
    getExtraData(val) {
      const target = this.points.find((item) => item.deductScoreId === val)
      this.form.deductScore = target.deductScoreCode
      this.form.deductScoreName = target.deductScore
      this.form.status = target.status
    }
  }
}
</script>




